<template>
  <div class="category-list">
    <div class="page-header">
      <h1>工具分类</h1>
      <p>浏览所有MCP工具分类</p>
    </div>

    <el-skeleton v-if="loading" :rows="3" animated />

    <div v-else>
      <el-row :gutter="20">
        <el-col v-for="category in categories" :key="category.id" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="category-col">
          <el-card class="category-card" shadow="hover" @click="goToCategoryTools(category.id)">
            <div class="category-icon">
              <img v-if="category.icon" :src="category.icon" :alt="category.name" />
              <el-icon v-else><Folder /></el-icon>
            </div>
            <div class="category-info">
              <h3>{{ category.name }}</h3>
              <p>{{ category.description || '暂无描述' }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div v-if="categories.length === 0" class="empty-state">
        <el-empty description="暂无分类" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Folder } from '@element-plus/icons-vue'

export default {
  name: 'CategoryList',
  components: {
    Folder
  },
  computed: {
    ...mapState(['categories', 'loading', 'error'])
  },
  created() {
    this.loadData()
  },
  methods: {
    ...mapActions(['fetchCategories']),
    
    async loadData() {
      try {
        await this.fetchCategories()
      } catch (error) {
        console.error('Error loading categories:', error)
      }
    },
    
    goToCategoryTools(categoryId) {
      this.$router.push({ name: 'CategoryTools', params: { id: categoryId } })
    }
  }
}
</script>

<style scoped>
.category-list {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #606266;
}

.category-col {
  margin-bottom: 20px;
}

.category-card {
  cursor: pointer;
  height: 100%;
  transition: transform 0.3s;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-icon {
  text-align: center;
  margin-bottom: 15px;
}

.category-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.category-icon .el-icon {
  font-size: 48px;
  color: #409EFF;
}

.category-info h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
  color: #303133;
}

.category-info p {
  text-align: center;
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.empty-state {
  padding: 40px 0;
}
</style> 